<template>
	<view class="login-page">
		<!-- 插画及文案区域 -->
		<view class="illustration-area">
			<image class="illustration-img" src="/static/images/login-illustration.png" mode="widthFix"></image>
			<text class="title">首次登录即享新人专属礼</text>
		</view>

		<!-- 登录按钮区域 -->
		<view class="btn-area">
			<u-button class="one-click-login" color="#000000" @click="getUserInfo" text="一键登录"></u-button>
			<!-- <u-button class="phone-login" text="手机号安全登录" shape="circle" color="#ffffff" border-color="#000000"></u-button> -->
			<view class="skip-login">暂不登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// isAgree: false
			};
		},
		onLoad() {
			this.doLogin();
		},
		methods: {
			doLogin() {
				// 2. 调用 uni.login 获取 code
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true,
					success: (loginRes) => {
						console.log('获取code成功:', loginRes);
						// 3. 将 code 发送到服务器换取 token
						this.getTokenFromServer(loginRes.code);
					},
					fail: (err) => {
						console.error('登录失败:', err);
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			async getTokenFromServer(code) {
				// console.log(code)
				let result = await this.$u.api.user.login({
					'code': code
				});
				// console.log(result);
				if (result.code) {
					console.log(result)
					uni.setStorageSync('userToken', result.data)
				}
			},
			getUserInfo() {
				uni.getUserProfile({
					desc: '获取用户信息', // 声明获取用户个人信息后的用途，会展示在弹窗中
					success: (infoRes) => {
						console.log(infoRes)
						this.userInfo(infoRes.userInfo)
						// console.log('用户昵称为：' + infoRes);
					}
				});
			},
			async userInfo(uInfo) {
				let userToken = uni.getStorageSync('userToken')
				// console.log(userToken);
				let result = await this.$u.api.user.userInfo(userToken);
				if (result.code) {
					console.log(result.data)
					uni.setStorageSync('userInfo', uInfo)
					uni.switchTab({
						url: '/pages/home/home'
					})
					uni.showToast({
						title: result.msg,
						icon: 'success'
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
		// padding: 0 20rpx;
		background-color: #ffffff;

		.illustration-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 100rpx;

			.illustration-img {
				width: 200rpx;
			}

			.title {
				font-size: 32rpx;
				color: #333333;
				margin-top: 40rpx;
			}
		}

		.btn-area {
			display: flex;
			flex-direction: column;
			width: 100%;
			margin-top: 80rpx;

			.one-click-login {
				background-color: #000000;
				color: #ffffff;
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.phone-login {
				margin-top: 30rpx;
				background-color: #ffffff;
				color: #000000;
				border-radius: 50rpx;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
			}

			.skip-login {
				text-align: center;
				margin-top: 40rpx;
				color: #999999;
				font-size: 28rpx;
			}
		}

		.agreement-area {
			position: fixed;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.protocol-text {
				color: #000000;
				text-decoration: underline;
			}
		}
	}
</style>